<script setup lang="ts">
  import { onMounted, ref as vueRef, watch } from 'vue'
  import { useI18n } from 'vue-i18n'
  import AppInput from '~/components/AppInput.vue'
  import BaseImage from '~/components/BaseImage.vue'
  import contactIcon from '/images/webp/setting/contact_icon.webp'
  import emailIcon from '/images/webp/setting/emails_icon.webp'
  import socialIcon from '/images/webp/setting/socials_icon.webp'

  // 导入社交账号图片
  import AppSelect from '~/components/AppSelect.vue'
  import arrowDown from '/images/webp/affiliate-program/arrow-down.webp'
  import socialFacebook from '/images/webp/setting/social-facebook-round.webp'
  import socialLine from '/images/webp/setting/social-line-round.webp'
  import socialTelegram from '/images/webp/setting/social-telegram-round.webp'
  import socialViber from '/images/webp/setting/social-viber-round.webp'
  import socialWechat from '/images/webp/setting/social-weixin-round.webp'
  import socialWhatsapp from '/images/webp/setting/social-whatsapp-round.webp'
  import socialTwitter from '/images/webp/setting/social-x-round.webp'
  import socialZalo from '/images/webp/setting/social-zalo-round.webp'

  const { t } = useI18n()

  definePageMeta({
    layout: 'header-back',
    title: 'contact_text'
  })
  const router = useRouter()
  const appStore = useAppStore()
  const { userInfo } = storeToRefs(appStore)
  const {
    bool: emailDisabledBtn,
    setTrue: setEmailDisabledBtnTrue,
    setFalse: setEmailDisabledBtnFalse
  } = useBoolean(true)
  // 邮箱地址
  const email = vueRef('')
  // 邮箱验证结果
  const emailValidation = vueRef({ isValid: true, message: '' })
  // 手机号码
  const phoneNumber = vueRef('')
  // 手机号验证结果
  const phoneValidation = vueRef({ isValid: true, message: '' })
  // 验证码
  const verifyCode = vueRef('')
  // 是否显示验证码弹框
  const showVerifyModal = vueRef(false)
  // 是否显示未收到验证码弹框
  const showNoCodeModal = vueRef(false)
  // 选中的国家代码
  const selectedCountryCode = vueRef('+63')

  // 倒计时
  const countdown = vueRef(0)
  // 倒计时定时器
  let countdownTimer: number | null = null
  // 是否显示倒计时
  const showCountdown = vueRef(false)
  // 是否已发送验证码
  const codeSent = vueRef(false)
  // 定义社交账号类型
  type SocialAccount = {
    [key: string]: string
  }
  const sex = ref(1)
  // 邮箱错误
  const emailErrormsg = vueRef(false)
  // 社交账号
  const socialAccounts = vueRef<SocialAccount>({
    facebook: '',
    whatsapp: '',
    telegram: '',
    line: '',
    twitter: '',
    zalo: '',
    viber: '',
    wechat: ''
  })

  // 初始社交账号值
  const initialSocialAccounts = ref<SocialAccount>({
    facebook: '',
    whatsapp: '',
    telegram: '',
    line: '',
    twitter: '',
    zalo: '',
    viber: '',
    wechat: ''
  })
  // 邮箱账号是否发生变化
  const IsEmailChasnged = vueRef(false)
  // 手机账号是否发生变化
  const IsPhoneChasnged = vueRef(false)
  // 社交账号是否发生变化
  const isSocialAccountsChanged = ref(false)
  // 验证码是否发生变化
  const isVerifyCodeChanged = vueRef(false)
  // 保存邮箱和手机号的初始值
  const initialEmail = ref('')
  const initialPhone = ref('')
  // 保存邮箱成功
  const IsSaveEmail = vueRef(false)
  // 保存手机成功
  const IsSavePhone = vueRef(false)
  // 监听社交账号变化
  watch(
    () => socialAccounts.value,
    newVal => {
      // 将Proxy对象转换为普通对象进行比较
      const newObj = JSON.parse(JSON.stringify(newVal))
      const initialObj = JSON.parse(JSON.stringify(initialSocialAccounts.value))
      // 检查是否有任何非空值发生变化
      isSocialAccountsChanged.value = Object.keys(newObj).some(key => {
        const newValue = newObj[key]?.trim()
        const initialValue = initialObj[key]?.trim()
        return newValue !== initialValue && (newValue !== '' || initialValue !== '')
      })
    },
    { deep: true, immediate: true }
  )

  // 监听邮箱变化
  watch(
    () => email.value,
    newVal => {
      IsEmailChasnged.value = newVal !== initialEmail.value
      IsSaveEmail.value = newVal !== initialEmail.value
    },
    { deep: true, immediate: true }
  )

  // 监听手机号变化
  watch(
    () => phoneNumber.value,
    newVal => {
      IsPhoneChasnged.value = newVal !== initialPhone.value
      IsSavePhone.value = newVal !== initialPhone.value
    },
    { deep: true, immediate: true }
  )
  // 监听验证码变化
  watch(
    () => verifyCode.value,
    newVal => {
      isVerifyCodeChanged.value = newVal !== ''
    },
    { deep: true, immediate: true }
  )

  // 社交账号验证结果
  const socialValidations = vueRef<{ [key: string]: { isValid: boolean; message: string } }>({
    facebook: { isValid: true, message: '' },
    whatsapp: { isValid: true, message: '' },
    telegram: { isValid: true, message: '' },
    line: { isValid: true, message: '' },
    twitter: { isValid: true, message: '' },
    zalo: { isValid: true, message: '' },
    viber: { isValid: true, message: '' },
    wechat: { isValid: true, message: '' }
  })

  // 社交账号列表
  const socialList = [
    { id: 'facebook', name: 'Facebook', icon: socialFacebook },
    { id: 'whatsapp', name: 'WhatsApp', icon: socialWhatsapp },
    { id: 'telegram', name: 'Telegram', icon: socialTelegram },
    { id: 'line', name: 'Line', icon: socialLine },
    { id: 'twitter', name: 'Twitter', icon: socialTwitter },
    { id: 'zalo', name: 'Zalo', icon: socialZalo },
    { id: 'viber', name: 'Viber', icon: socialViber },
    { id: 'wechat', name: 'WeChat', icon: socialWechat }
  ]

  // 国家代码选项 - 修改为带标签和值的格式，适配AppSelect组件
  const countryCodeOptions = [
    { label: '+376 安道尔', value: '+376' },
    { label: '+971 阿拉伯联合酋长国', value: '+971' },
    { label: '+93 阿富汗', value: '+93' },
    { label: '+1268 安提瓜和巴布达', value: '+1268' },
    { label: '+1264 安圭拉岛', value: '+1264' },
    { label: '+355 阿尔巴尼亚', value: '+355' },
    { label: '+83 乌拉圭', value: '+83' },
    { label: '+381 阿根廷', value: '+381' },
    { label: '+63 菲律宾', value: '+63' },
    { label: '+86 中国', value: '+86' },
    { label: '+1 美国', value: '+1' },
    { label: '+44 英国', value: '+44' },
    { label: '+81 日本', value: '+81' },
    { label: '+82 韩国', value: '+82' }
  ]

  // 区号选择弹框标题
  const countryCodeSelectTitle = t('contact_area_choice')

  // 区号选择器ref
  const countrySelect = vueRef<{
    showSelect: boolean
    openSelect?: () => void
  } | null>(null)
  const { start, current, pause, reset } = useCountDown({ time: 60000 })

  // 返回设置页面
  const goBack = () => {
    router.push('/setting')
  }
  // 重新发送邮箱验证
  const { run: runEmailCheckRequest, loading: loadingEmailCheckRequest } = useRequest(
    ApiMemberEmailCheckRequest,
    {
      onSuccess(data) {
        stop()
        if (+data > 0) {
          reset(+data * 1000)
          start()
        } else {
          reset(60 * 1000)
          start()
        }
      }
    }
  )

  const resendEmail = () => {
    // 重新发送邮箱验证逻辑
    const initEmailText = userInfo.value?.email
    if (email.value !== initEmailText) {
      if (emailErrormsg.value)
        runMemberUpdate({ record: { email: email.value }, uid: userInfo.value?.uid })
    } else emailCheck(true)
  }
  async function emailCheck(manual: boolean) {
    if (!emailErrormsg.value) {
      runEmailCheckRequest({ email: email.value })
    }
  }
  const { runAsync: runMemberUpdate } = useRequest(ApiMemberUpdate, {
    onSuccess(data, params) {
      if (params[0].record.email) {
        setEmailDisabledBtnTrue()
        startCountdown() // 保存成功后立即启动倒计时
        message.success(`${t('tip_email_to')} ${email.value}`)
        appStore.updateUserInfo()
        IsSaveEmail.value = true
        IsEmailChasnged.value = false // 重置邮箱变化状态
      }
      if (params[0].record.phone) {
        message.success(t('success_msg'))
        appStore.updateUserInfo()
        IsSavePhone.value = true
        IsPhoneChasnged.value = false // 重置手机号变化状态
      }
    },
    onError(error, params) {}
  })
  // 保存邮箱
  const saveEmail = () => {
    // 检查邮箱是否有效
    if (!emailValidation.value.isValid || !email.value) {
      message.error(emailValidation.value.message || t('contact_email_empty'))
      return
    }

    // 检查用户ID是否存在
    if (!userInfo.value?.uid) {
      message.error(t('user_not_found'))
      return
    }

    // 保存邮箱逻辑
    runMemberUpdate({
      record: {
        email: email.value
      },
      uid: userInfo.value.uid
    })
  }
  // 验证手机号码
  const verifyPhone = () => {
    // 检查手机号是否有效
    if (!phoneValidation.value.isValid || !phoneNumber.value) {
      message.error(phoneValidation.value.message || t('contact_phone_empty'))
      return
    }

    const validatePhone = async () => {
      try {
        // 组合区号和手机号
        const fullPhoneNumber = `${selectedCountryCode.value} ${phoneNumber.value}`
        console.log('验证手机号:', fullPhoneNumber)

        showVerifyModal.value = true
        // 不自动发送验证码，等待用户点击"获取验证码"按钮
      } catch (error) {
        message.error(t('contact_phone_verify_failed'))
      }
    }

    validatePhone()
  }

  // 开始倒计时
  const startCountdown = () => {
    showCountdown.value = true
    countdown.value = 57 // 57秒倒计时
    if (countdownTimer) {
      clearInterval(countdownTimer)
    }
    countdownTimer = window.setInterval(() => {
      if (countdown.value > 0) {
        countdown.value--
      } else {
        if (countdownTimer) {
          clearInterval(countdownTimer)
          countdownTimer = null
          showCountdown.value = false
        }
      }
    }, 1000)
  }
  /** 发送手机验证码 */
  const { runAsync: runAsyncSendPhoneSms, loading: phoneCaptchaLoading } = useRequest(
    ApiMemberPhoneSms,
    {
      onSuccess() {
        reset()
        // 开始倒计时
        startCountdown()
        message.success(`${t('success_send_code')}`)
      }
    }
  )
  // 发送验证码
  const sendVerifyCode = async () => {
    // 组合区号和手机号
    const fullPhoneNumber = `${selectedCountryCode.value}-${phoneNumber.value}`
    try {
      await runAsyncSendPhoneSms({ phone: fullPhoneNumber, type: 0 })
      // 标记验证码已发送
      codeSent.value = true
    } catch (error) {
      message.error(t('send_code_failed'))
    }
  }

  // 重新发送验证码
  const resendVerifyCode = () => {
    if (countdown.value > 0) return
    // 重新发送验证码
    sendVerifyCode()
  }

  // 提交验证码
  const submitVerifyCode = () => {
    // 验证码验证逻辑
    console.log('提交验证码:', verifyCode.value)
    // 验证成功后关闭弹窗
    showVerifyModal.value = false
    verifyCode.value = ''
  }

  // 显示未收到验证码弹框
  const showNoCodeHelp = () => {
    showNoCodeModal.value = true
  }

  // 关闭验证码弹框
  const closeVerifyModal = () => {
    showVerifyModal.value = false
    verifyCode.value = ''
    // 不重置codeSent，保持状态，以便下次打开时仍显示"再次发送"
  }

  // 关闭未收到验证码弹框
  const closeNoCodeModal = () => {
    showNoCodeModal.value = false
  }

  // 保存社交账号
  const saveSocial = () => {
    // 检查所有社交账号是否有效
    const allValid = Object.values(socialValidations.value).every(
      v => (v as { isValid: boolean; message: string }).isValid
    )
    if (!allValid) {
      return
    }
    // 遍历完成后增加判断是否调用接口
    nextTick(() => {
      if (allValid) {
        // 检查用户ID是否存在
        if (!userInfo.value?.uid) {
          message.error(t('user_not_found'))
          return
        }
        runMemberUpdate({
          record: { sex: sex.value.toString(), ...socialAccounts.value, uid: userInfo.value.uid },
          uid: userInfo.value.uid
        })
        message.success(`${t('success_msg')}`)
        initialSocialAccounts.value = JSON.parse(JSON.stringify(socialAccounts.value))
        // 保存成功后更新初始值
        isSocialAccountsChanged.value = false
      } else {
        message.error(`t('fail_msg')`)
      }
    })
    // 保存社交账号逻辑
    console.log('保存社交账号:', socialAccounts.value)
  }

  // 验证手机号函数
  const validatePhone = (e: Event) => {
    const target = e.target as HTMLInputElement
    const value = target.value

    // 简单的手机号验证
    const phoneRegex = /^\d{6,15}$/
    const isValid = phoneRegex.test(value)

    phoneValidation.value = {
      isValid,
      message: isValid ? '' : t('contact_phone_invalid')
    }
  }

  // 打开区号选择
  const openCountrySelect = () => {
    if (countrySelect.value && typeof countrySelect.value.openSelect === 'function') {
      countrySelect.value.openSelect()
    }
  }

  // 在组件挂载时从userInfo获取初始值
  onMounted(() => {
    if (userInfo.value?.mext) {
      const mext = userInfo.value.mext
      console.log('userInfo', userInfo.value)

      // 更新社交账号
      socialAccounts.value = {
        facebook: mext.facebook || '',
        whatsapp: mext.whatsapp || '',
        telegram: mext.telegram || '',
        line: mext.line || '',
        twitter: mext.twitter || '',
        zalo: mext.zalo || '',
        viber: mext.viber || '',
        wechat: mext.wechat || ''
      }
      // 保存初始值
      initialSocialAccounts.value = JSON.parse(JSON.stringify(socialAccounts.value))

      // 保存邮箱和手机号的初始值
      initialEmail.value = userInfo.value.email || ''
      initialPhone.value = userInfo.value.phone.split('-')[1] || ''

      // 设置当前值
      email.value = initialEmail.value
      phoneNumber.value = initialPhone.value
      if (email.value) IsSaveEmail.value = true
      if (phoneNumber.value) IsSavePhone.value = true
    }
  })
</script>

<template>
  <div class="contact-page">
    <div class="contact-content">
      <!-- 页面标题 -->
      <div class="page-title">{{ t('contact_text') }}</div>

      <!-- 邮箱地址部分 -->
      <div class="section email-section">
        <div class="section-item">
          <div class="content">
            <BaseImage width="28px" style="height: 28px; margin-bottom: 10px" :url="emailIcon" />
            <div class="title">
              {{ t('contact_email_address')
              }}<span v-if="!IsSaveEmail" class="title-lable">已验证</span>
            </div>
            <div class="label">{{ t('email') }}</div>
            <div class="input-row">
              <AppInput
                name="email"
                v-model="email"
                v-model:validateResult="emailValidation"
                :placeholder="t('email')"
                type="email"
              />
            </div>
            <div class="button-row" v-if="IsSaveEmail">
              <button
                class="resend-btn"
                :disabled="countdown > 0 || !IsEmailChasnged"
                @click="resendEmail"
              >
                <template v-if="countdown > 0"> {{ countdown }}s {{ t('resend') }} </template>
                <template v-else>
                  {{ t('resend') }}
                </template>
              </button>
              <button class="save-btn" @click="saveEmail" :disabled="!IsEmailChasnged">
                {{ t('contact_save') }}
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 手机号码部分 -->
      <div class="section phone-section">
        <div class="section-item">
          <div class="content">
            <BaseImage width="28px" style="height: 28px; margin-bottom: 10px" :url="contactIcon" />
            <div class="title">
              <span style="display: inline-block; margin-bottom: 20px">{{ t('phone') }}</span
              ><span v-if="!IsSavePhone" class="title-lable">已验证</span>
              <div class="phone-desc">{{ t('contact_phone_desc') }}</div>
            </div>
            <div class="label">{{ t('phone') }}</div>
            <div class="input-row">
              <div class="unified-phone-input">
                <div class="country-code-part" @click="openCountrySelect">
                  <span>{{ selectedCountryCode }}</span>
                  <span class="arrow-down">
                    <BaseImage
                      width="19px"
                      height="15px"
                      style="transform: translateY(1px)"
                      :url="arrowDown"
                    />
                  </span>
                </div>
                <div class="divider"></div>
                <input
                  v-model="phoneNumber"
                  :placeholder="t('contact_phone_placeholder')"
                  type="tel"
                  class="phone-input-field"
                  @input="validatePhone"
                />
              </div>
              <AppSelect
                ref="countrySelect"
                v-model="selectedCountryCode"
                :options="countryCodeOptions"
                :showTrigger="false"
                :searchable="true"
                :title="countryCodeSelectTitle"
              />
            </div>
            <div class="button-row" v-if="IsSavePhone">
              <button class="verify-btn" @click="verifyPhone" :disabled="!IsPhoneChasnged">
                {{ t('verify') }}
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 社交账号部分 -->
      <div class="section social-section">
        <div class="section-item">
          <div class="content">
            <BaseImage width="28px" style="height: 28px; margin-bottom: 10px" :url="socialIcon" />
            <div class="title">{{ t('contact_social_accounts') }}</div>
            <!-- 社交媒体输入 -->
            <div class="social-inputs">
              <!-- 使用循环渲染社交账号输入 -->
              <div v-for="social in socialList" :key="social.id" class="social-input-row">
                <div class="social-icon">
                  <BaseImage width="32px" height="32px" :url="social.icon" />
                </div>
                <AppInput
                  :name="social.id"
                  v-model="socialAccounts[social.id]"
                  v-model:validateResult="socialValidations[social.id]"
                  class="app-input-wrapper"
                />
              </div>
            </div>
            <div class="button-row">
              <button class="save-btn" :disabled="!isSocialAccountsChanged" @click="saveSocial">
                {{ t('contact_save') }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 电话验证弹框 -->
    <div v-if="showVerifyModal" class="modal-overlay" @click.self="closeVerifyModal">
      <div class="verify-modal">
        <div class="modal-header">
          <div class="modal-title">{{ t('contact_phone_verification') }}</div>
          <div class="close-btn" @click="closeVerifyModal">×</div>
        </div>
        <div class="modal-body">
          <div class="verify-instructions">{{ t('pls_input_verify_code', { detail: 6 }) }}</div>
          <div class="verify-phone">({{ selectedCountryCode }}) {{ phoneNumber }}</div>
          <div class="verify-input-container">
            <input
              type="text"
              v-model="verifyCode"
              :placeholder="t('verify_code')"
              maxlength="6"
              pattern="[0-9]*"
              inputmode="numeric"
              class="code-input"
            />
            <button
              :class="['code-btn', { 'resend-code-btn': codeSent, 'get-code-btn': !codeSent }]"
              :disabled="showCountdown"
              @click="resendVerifyCode"
            >
              <template v-if="showCountdown"
                >{{ countdown }}{{ t('contact_seconds_resend') }}</template
              >
              <template v-else-if="codeSent">{{ t('send_again') }}</template>
              <template v-else>{{ t('get_code') }}</template>
            </button>
          </div>
          <div class="verify-actions">
            <button class="submit-btn" @click="submitVerifyCode" :disabled="!isVerifyCodeChanged">
              {{ t('submit') }}
            </button>
          </div>
          <div class="no-code-link">
            <a href="javascript:void(0)" @click="showNoCodeHelp">{{ t('no_get_code') }}</a>
          </div>
        </div>
      </div>
    </div>

    <!-- 没收到验证码帮助弹框 -->
    <div v-if="showNoCodeModal" class="modal-overlay" @click.self="closeNoCodeModal">
      <div class="no-code-modal">
        <div class="modal-header">
          <div class="modal-title">{{ t('no_get_code') }}</div>
          <div class="close-btn" @click="closeNoCodeModal">×</div>
        </div>
        <div class="modal-body">
          <div class="no-code-text">
            {{ t('not_get_code1') }}
          </div>
          <div class="no-code-checklist">
            <div class="checklist-item">{{ t('not_get_code2') }}</div>
            <div class="checklist-item">{{ t('not_get_code3') }}</div>
            <div class="checklist-item">{{ t('not_get_code4') }}</div>
            <div class="checklist-item">{{ t('not_get_code5') }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .contact-page {
    height: 100vh;
    background-color: #232626;
    color: #fff;
    overflow-y: auto;
    padding: 16px;

    .page-title {
      font-size: 18px;
      font-weight: 500;
      padding: 10px 10px 15px 0;
      color: #fff;
      border-bottom: 1px solid var(--white-10010, #ffffff1a);
      margin-left: 10px;
    }

    .contact-content {
      background-color: #323738;
      border-radius: 8px;
    }

    .section {
      padding: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding-left: 20px;
      margin-left: 10px;

      &:last-child {
        border-bottom: none;
      }
    }

    .section-item {
      display: flex;
      align-items: flex-start;
      gap: 16px;

      .icon-container {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .content {
        flex: 1;

        .title {
          font-size: 16px;
          font-weight: 500;
          margin-bottom: 16px;
          border-bottom: 1px solid var(--white-10010, #ffffff1a);
          padding-bottom: 14px;
          .title-lable {
            font-family: SF Pro;
            font-weight: 590;
            font-size: 10px;
            line-height: 100%;
            letter-spacing: 0%;
            width: 42;
            height: 12;
            padding-right: 6px;
            padding-left: 6px;
            gap: 10px;
            border-radius: 4px;
            background: #9fe871;
            color: var(---black-hsl-0000000, #000000);
            margin-left: 8px;
          }
        }

        .label {
          font-size: 14px;
          color: rgba(255, 255, 255, 0.8);
          margin-bottom: 8px;
        }

        .phone-desc {
          font-size: 14px;
          color: rgba(255, 255, 255, 0.6);
        }

        .input-row {
          margin-bottom: 16px;
        }

        .button-row {
          display: flex;
          gap: 8px;

          .resend-btn {
            flex: 1;
            height: 40px;
            background-color: #3a4142;
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;

            &:disabled {
              opacity: 0.7;
              cursor: not-allowed;
            }

            &:not(:disabled):hover {
              background-color: #4a5354;
            }
          }

          .save-btn,
          .verify-btn {
            flex: 1;
            height: 40px;
            background: linear-gradient(90deg, #24ee89, #9fe871);
            color: #000;
            border: none;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;

            &:disabled {
              opacity: 0.5;
              cursor: not-allowed;
            }
          }
        }
      }
    }

    .social-inputs {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 16px;
    }

    .social-input-row {
      display: flex;
      align-items: center;
      gap: 12px;

      .social-icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: transparent;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .app-input-wrapper {
        flex: 1;
      }
    }
  }

  :deep(.base-input) {
    background-color: #232626 !important;
    border: 1px solid #3b4041 !important;
    height: 40px !important;

    input {
      background-color: transparent;
      color: white;
      font-size: 14px;

      &::placeholder {
        color: rgba(255, 255, 255, 0.5);
      }
    }
  }

  /* 统一的手机号输入框 */
  .unified-phone-input {
    display: flex;
    align-items: center;
    width: 100%;
    height: 42px;
    background-color: #292d2e;
    border: 2px solid #3b4041;
    border-radius: 6px;
    overflow: hidden;

    &.is-invalid {
      border-color: #ff4d4f;
    }
  }

  .country-code-part {
    display: flex;
    align-items: center;
    padding: 0 20px;
    min-width: 80px;
    cursor: pointer;

    .arrow-down {
      font-size: 10px;
      margin-left: 6px;
      color: rgba(255, 255, 255, 0.5);
    }
  }

  .divider {
    width: 1px;
    height: 20px;
    background-color: #3b4041;
  }

  .phone-input-field {
    flex: 1;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 12px;
    padding: 0 12px;

    &::placeholder {
      color: rgba(255, 255, 255, 0.5);
    }
  }

  /* 隐藏原来的样式 */
  .phone-input-container {
    display: none;
  }

  /* 弹框样式 */
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 100;
  }

  .verify-modal,
  .no-code-modal {
    width: 100%;
    background-color: #232626;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    animation: slideUp 0.3s ease-out;
  }

  .modal-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    position: relative;
  }

  .modal-title {
    font-size: 16px;
    font-weight: 500;
  }

  .close-btn {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background-color: #4a5354;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }

  .modal-body {
    padding: 20px 16px;
  }

  /* 验证码弹框样式 */
  .verify-instructions {
    text-align: left;
    font-size: 12px;
    color: #a8aeb0;
    margin-bottom: 10px;
  }

  .verify-phone {
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 20px;
  }

  .verify-input-container {
    display: flex;
    border: 2px solid var(---border-black-33B4041, #3b4041);
    border-radius: 6px;
    background-color: #292d2e;
    height: 42px;
    margin-bottom: 20px;
    overflow: hidden;
    padding: 4px;
  }

  .code-input {
    flex: 1;
    height: 100%;
    background-color: transparent;
    border: none;
    color: white;
    font-size: 16px;
    text-align: left;
    padding: 0 8px;
    outline: none;

    &::placeholder {
      color: #b3bec1;
    }
  }

  .resend-code-btn {
    height: 100%;
    border: none;
    background-color: #3a4142;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    padding: 0 12px;
    white-space: nowrap;
    border-left: 1px solid #3b4041;
    border-radius: 6px;
    cursor: pointer;

    &:disabled {
      color: rgba(255, 255, 255, 0.4);
      cursor: not-allowed;
    }
  }

  .get-code-btn {
    height: 100%;
    border: none;
    background: linear-gradient(90deg, #24ee89, #9fe871);
    color: #000;
    font-weight: 600;
    font-size: 14px;
    padding: 0 12px;
    white-space: nowrap;
    border-left: 1px solid #3b4041;
    border-radius: 6px;
    cursor: pointer;

    &:disabled {
      opacity: 0.7;
      cursor: not-allowed;
    }
  }

  .code-btn {
    min-width: 110px;
    text-align: center;
  }

  .resend-btn-container {
    display: none;
  }

  .verify-actions {
    margin-bottom: 15px;
  }

  .submit-btn {
    width: 100%;
    height: 46px;
    background: linear-gradient(90deg, #24ee89, #9fe871);
    color: #000;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    &:disabled {
      opacity: 0.7;
      cursor: not-allowed;
    }
  }

  .no-code {
    display: none;
  }

  .no-code-link {
    text-align: left;

    a {
      color: #24ee89;
      font-size: 14px;
      text-decoration: none;
    }
  }

  /* 没有收到验证码弹框样式 */
  .no-code-text {
    font-size: 12px;
    color: #b3bec1;
    margin-bottom: 20px;
    line-height: 1.5;
  }

  .no-code-checklist {
    .checklist-item {
      font-size: 12px;
      color: #b3bec1;
      margin-bottom: 12px;
      line-height: 1.5;
    }
  }

  @keyframes slideUp {
    from {
      transform: translateY(100%);
    }

    to {
      transform: translateY(0);
    }
  }

  /* 覆盖AppSelect弹框标题样式，确保居中 */
  :deep(.popup-header) {
    display: flex;
    justify-content: center !important;
    position: relative;
    padding: 16px;

    .popup-title {
      font-size: 16px;
      font-weight: 500;
      text-align: center;
      position: relative;
    }

    .close-btn {
      position: absolute !important;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .error-message {
    color: #ff4d4f;
    font-size: 12px;
    margin-top: 4px;
    margin-bottom: 8px;
  }
</style>
